<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<div class="flex-wrapper">
    <div id="courses" class="content">
        {% for ranks in statuses %}
            {% if loop.index == 1 or ranks|length > 0 %}
                <h1>Your {{ loop.index == 1 ? "" : "Archived " }}Courses</h1>
                {% for rank in ranks %}
                    <h2>As {{ rank.title }}</h2>
                    <ul id="course-list" class="bare-list">
                        {% for course in rank.courses %}
                            <li>
                                <a id="{{ course['semester'] }}_{{ course['title'] }}" class="btn btn-primary btn-block btn-course" href="{{ core.buildUrl([course['semester'], course['title']]) }}">
                                    {{ course['display_semester'] }} &nbsp; &nbsp;
                                    {{ course['title'] | upper }} &nbsp; &nbsp;
                                    {% if course['display_name'] != "" %}
                                        {{ course['display_name'] }}
                                    {% endif %}
                                    {{ user.accessAdmin() }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endfor %}
            {% endif %}
        {% endfor %}
    </div>
    <div class="content">
        <h1>About You</h1>
        <ul class="bare-list">
            <li><b>Username:</b> {{ user.getId() }}</li>
            <li class="flex-row">
                <span><b>First Name:</b>&nbsp;{{ user.getDisplayedFirstName() }}</span>
                <a class="icon" tabindex="0" href="javascript:userNameChange()" aria-label="Change preferred names" title="Change preferred names">
                    <i class="fas fa-pencil-alt"></i>
                </a>
            </li>
            <li><b>Last Name:</b> {{ user.getDisplayedLastName() }}</li>
            <li><b>Email:</b> {{ user.getEmail() }}</li>
            {% if display_access_level %}
                <li><b>Access Level: </b> {{ access_level }}</li>
            {% endif %}
            {% if show_change_password %}
                <li class="flex-row">
                    <b>Change Password</b>
                    <a class="icon" tabindex="0" href="javascript:passwordChange()" aria-label="Change password" title="Change password">
                        <i class="fas fa-pencil-alt"></i>
                    </a>
                </li>
            {% endif %}
        </ul>
    </div>
</div>
{% include 'EditNameForm.twig' %}
{% if show_change_password %}
    {% include 'ChangePasswordForm.twig' %}
{% endif %}
